<script setup>
import { ref,onMounted } from 'vue';
import { useUserStore } from "../../store/user.js";
import {updateUserApi,getUserApi } from "../../api/index.js";
// import axios from "axios";
import { ElMessage } from 'element-plus'
import { UploadFilled } from '@element-plus/icons-vue'

const userStore = useUserStore();
const id = userStore.userInfo.id;
const baseUrl = 'http://127.0.0.1:8000'
const imgSrc = baseUrl+userStore.userInfo.image;
const editUserDialogVisible = ref(false);
const imgEditDialogVisible = ref(false)
const userDetails = ref([]);
const getUserDetails = async () => {
  // console.log(userStore.userInfo.id)
  const {data:res} = await getUserApi(userStore.userInfo.id);
  userDetails.value=[res.data]
  // console.log(userDetails)
}
const userDetailsEdit = ref({});
const userEdit = () => {
  editUserDialogVisible.value = true;
  userDetailsEdit.value=userDetails.value[0]
  getUserDetails();
}
const editUser=async()=>{
  const {data:res} = await updateUserApi(userDetailsEdit.value);
  console.log(res)
  if (res.code==400){
    ElMessage.error(res.message)
  }else if(res.code==200){
    ElMessage.success(res.message)
    editUserDialogVisible.value = false;
    getUserDetails();
  }
}

const imgEdit = () => {
  imgEditDialogVisible.value = true
}

// 文件（头像）上传

const upload = ref(null)
const uploadUrl = `http://127.0.0.1:8000/api/user/${id}/image/`

const handleExceed = (files, fileList) => {
  ElMessage.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件`)
}

const handleSuccess = async (response, file, fileList) => {
  ElMessage.success('上传成功!')
  imgEditDialogVisible.value = false
  const {data:res} = await getUserApi(id);
  userStore.setUser(res.data)
  window.location.reload();
}

const handleError = (err, file, fileList) => {
  ElMessage.error('上传失败!')
  console.error(err)
}

const submitUpload = () => {
  upload.value.submit()
}
onMounted(()=>{
  getUserDetails();
})
</script>

<template>
  <el-card class="user-info-card">
    <template #header>
      <h3 class="user-info-title">用户信息</h3>
    </template>
    <el-image :src="imgSrc" fit="cover" class="user-avatar" />

    <div class="user-edit">
      <el-button type="info" @click="imgEdit">编辑头像</el-button>
      <el-button type="primary" @click="userEdit">编辑</el-button>
    </div>
    <div class="user-details">
      <el-table :data="userDetails" border style="width: 100%">
        <el-table-column prop="username" label="用户名"></el-table-column>
        <el-table-column prop="email" label="邮箱" ></el-table-column>
      </el-table>
    </div>

    <el-dialog title="编辑用户" v-model="editUserDialogVisible" width="30%">
      <el-form :model="userDetailsEdit" label-width="80px">
        <el-form-item label="用户名">
          <el-input v-model="userDetailsEdit.username"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="userDetailsEdit.password"></el-input>
        </el-form-item>
        <el-form-item label="邮箱">
          <el-input v-model="userDetailsEdit.email"></el-input>
        </el-form-item>
        <el-button type="primary" @click="editUser">确定</el-button>
        <el-button @click="editUserDialogVisible = false">取消</el-button>
      </el-form>
    </el-dialog>

    <el-dialog title="修改头像" v-model="imgEditDialogVisible" width="30%">
      <el-upload
          class="upload-demo"
          drag
          name="image"
          :action="uploadUrl"
          :on-success="handleSuccess"
          :on-error="handleError"
          :auto-upload="false"
          ref="upload"
          accept=".jpg,.png"
          :limit="1"
          :on-exceed="handleExceed"
      >
        <el-icon class="el-icon--upload"><upload-filled /></el-icon>
        <div class="el-upload__text">
          拖动文件 或 <em>点击上传</em>
        </div>
        <template #tip>
          <div class="el-upload__tip">
            jpg/png files with a size less than 500kb
          </div>
        </template>
      </el-upload>
      <template #footer>
      <span class="dialog-footer">
        <el-button @click="imgEditDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitUpload">确定</el-button>
      </span>
      </template>
    </el-dialog>
  </el-card>
</template>

<style scoped>
.user-info-card {
  margin: 10px;
  border-radius: 10px;
  padding: 10px;
}

.user-avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
}

.user-details {
  margin-top: 20px;
}

.el-table {
  border: 1px solid #ebeef5;
}

.el-table th {
  background-color: #f5f7fa;
}

.el-table td,
.el-table th {
  border: 1px solid #ebeef5;
  padding: 10px;
}

.el-table-column th {
  width: 200px;
}
.el-image{
  width: 100px;
  height: 100px;
  border-radius: 50%;
}
</style>

